<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<script type="text/javascript" src="<%=request.getContextPath()%>/script/includedialog.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#previewBtn").click(function() {
            var qsIterator = $("div.question table");

            var initPage = function () {
                var inactiveImgFlag = "_tint.";
                if (qsIterator.length == 1) {
                    Dialogs.inactiveBtn($("#previousBtn"), inactiveImgFlag);
                    Dialogs.inactiveBtn($("#nextBtn"), inactiveImgFlag);
                } else {
                    Dialogs.inactiveBtn($("#previousBtn"), inactiveImgFlag);
                    $("#nextBtn").removeAttr("disabled");
                }

                currentSeq = 1;

                $("#titleList").empty();
                qsIterator.each(function (i) {
                    if (i == 0) {
                        var html1 = "<li name='qsTitle" + $(this).attr("sequence") + "' class='active'>";
                        var html2 = "    <a href='#' onclick='readQsByClickTitle(" + $(this).attr("sequence") + ");'>";
                        var html3 = "        " + $(this).attr("title");
                        var html4 = "    </a>";
                        var html5 = "</li>";
                        var html = html1 + html2 + html3 + html4 + html5;

                        $("#titleList").append(html);
                    } else {
                        var html1 = "<li name='qsTitle" + $(this).attr("sequence") + "' >";
                        var html2 = "    <a href='#' onclick='readQsByClickTitle(" + $(this).attr("sequence") + ");'>";
                        var html3 = "        " + $(this).attr("title");
                        var html4 = "    </a>";
                        var html5 = "</li>";
                        var html = html1 + html2 + html3 + html4 + html5;

                        $("#titleList").append(html);
                    }
                });
            }

            var firstQsId = $("div.question table:first").attr("qsId");

            if (firstQsId == undefined) {
                alert("There is no Pages involved in this Dialog.");
            } else {
                initPage();

                $.get("poe.html", {qsId : firstQsId}, function(data) {
                    $("#preview").show();
                    $("#previewContent").html(data);
                });
            }
        });
    });
</script>


<!--START: conent -->
<div class="content2" id="pages" style="display:none">
    <div class="insider">
        <div class="corners">
            <div class="corners_top"></div>

            <jsp:include page="baseInfo.jsp" />

            <ul class="functions1 fun1_3">
                <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                    <li>
                        <a href="#" onclick="jumpAction('SUBMIT');">
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_save.gif" class="btn" />
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="jumpAction('SUBMIT_AND_EXIT');">
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_save_exit.gif" class="btn" />
                        </a>
                    </li>
                    <li>

                        <a href="list.html?from=cancel&checkSearch=list"><img src="<%=request.getContextPath()%>/images/btn/functions1/btn_cancel.gif"
                                                                                  alt="" width="122" height="23" class="btn" />
                        </a>

                    </li>

                    <li>
                        <a id="previewBtn" href="#">
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_preview.gif" class="btn" />
                        </a>
                    </li>
                </security:authorize>

            </ul>
            <div class="corners_bottom"></div>
        </div>

        <div class="error">
            <h3 id="pagemessage">
                ${pagemessage}
                <style> p { margin:0px }</style>
                <font color="red">
                    <p id="Msg_Retire" style="display:none;">${Msg_Retire_Dialog}</p>
                    <p id="Msg_Locked" style="display:none">${Msg_Locked}</p>
                </font>
            </h3>
        </div>

        <ul class="functions2">
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li class="fr">
                    <input type="image" src="<%= request.getContextPath()%>/images/btn/functions1/btn_include.gif" class="btn"
                           onclick="$('#include').show();" />
                </li>
            </security:authorize>
            <li class="view">
                <a href="#" onclick="linkAction('../questionset/view')">
                    <img name="qbtn" class="btn" src="<%= request.getContextPath()%>/images/btn/functions2/btn_view_light.gif" alt="view" />
                </a>
            </li>
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li>
                    <a href="#" onclick="alinkAction('../questionset/edit')">
                        <img name="qbtn" class="btn" src="<%= request.getContextPath()%>/images/btn/functions2/btn_edit_light.gif" alt="edit" id ="editButton"/>
                    </a>
                </li>
            </security:authorize>

            <li>
                <a href="#">
                    <img name="qbtn" onclick="if(confirm('This page may have responses associated with it. By deleting it, you will no longer be able to access those responses.'))
                    remove();" class="btn" src="<%= request.getContextPath()%>/images/btn/functions2/btn_remove_light.gif" alt="remove" />
                </a>
            </li>

        </ul>

        <div id="include" style="display:none;position:absolute;top:100px;width:800px;">
            <!-- POPUP BEGIN -->
            <div class="popup">
                <div class="popup_top">
                    <span>
                        <input type="image" src="<%=request.getContextPath()%>/images/icon/close.gif" class="close" alt="close"
                               onclick="closeWindow();" />
                    </span>
                </div>
                <div class="popup_insider">
                    <div class="search">
                        <input type="text" id="keywords" style="font-size:16px;" class="search_input" value="Search by Keywords..." onclick="searchClean(this)" maxlength="255" />
                        <input type="image" src="<%=request.getContextPath()%>/images/btn/btn_search2.gif" class="btn_search2"
                               onclick="searchClean($('#keywords'));search();" />
                    </div>
                    <div class="error message">
                        <h3>
                            <style> p { margin:0px }</style>
                            <p id="dialogmessage">${Msg_SelectOne}</p><br>
                            <p id="Msg_IncludeIt" style="display:none;">${Msg_IncludeIt}</p>
                            <font color="red">
                                <p id="Msg_HaveIt" style="display:none;">${Msg_HaveIt}</p>                                
                                <p id="Msg_Retire" style="display:none;">${Msg_Retire}</p>
                            </font>
                        </h3>
                    </div>

                    <ul class="functions2">
                        <li>
                            <input type="image" src="<%=request.getContextPath()%>/images/btn/functions1/btn_include_page.gif"
                                   alt="include page" class="btn" onclick="includeSet('${dialog.questionnaireId}');"/>
                        </li>
                        <li>
                            <input type="image" src="<%=request.getContextPath()%>/images/btn/functions2/btn_close.gif" alt="close" class="btn" onclick="closeWindow();"/>
                        </li>
                    </ul>

                    <div class="scrollbar">
                        <div id="qresults" class="data_tbody">
                        </div>
                    </div>
                </div>
                <div class="popup_bottom"><span></span></div>
            </div>
            <!--END: popup -->
        </div>
        <table width="100%" cellspacing="0" class="data_thead">
            <thead>
            <tr>
                <th width="5%"></th>
                <th width="15%">Name</th>
                <th width="12%">ID</th>
                <th width="8%">Version</th>
                <th width="20%">Status/Availability
                </th>
                <th width="40%">
                    Title
                </th>
            </tr>
            <thead>
        </table>
        <div class="question_sets">
            <div class="question_sets_inside">
                <form id="includePages" name="includePages" method="post" eccc="true">
                    <input type="hidden" name="id" value="${param.id}" />
                    <input type="hidden" id="submitAction2" name="submitAction" />

                    <div class="question">
                        <c:if test="${isCreate == 'isValidate'}">
                            <jsp:include page="includepage_validate.jsp" />
                        </c:if>
                        <c:if test="${isCreate != 'isValidate'}">
                            <jsp:include page="includepage.jsp" />
                        </c:if>

                    </div>
                </form>

                <ul class="question_sets_move">
                    <li>
                        <input type="image" name="qbtn" class="btn" onclick="up();"
                               src="<%= request.getContextPath()%>/images/btn/functions2/btn_move_up_light.gif" />
                    </li>
                    <li>
                        <a href="#" onclick="down(); return false;">
                            <img name="qbtn" class="btn" src="<%= request.getContextPath()%>/images/btn/functions2/btn_move_down_light.gif" alt="text" />
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<jsp:include page="poeFrame.jsp" />